<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span>{{title}}</span>
      </div>
      <el-form ref="addForm" :model="addForm" :rules="rules" label-position="left" label-width="120px" class="infos flex">
        <el-form-item label="供应商名称" prop="menuName" style="width:30%">
          <el-input v-model="addForm.menuName" placeholder="请输入供应商名称"></el-input>
        </el-form-item>
        <el-form-item label="供应商网站" prop="menuWeb" style="width:30%">
          <el-input v-model="addForm.menuWeb" placeholder="请输入供应商网站"></el-input>
        </el-form-item>
        <el-form-item label="公司性质" prop="companyNature" style="width:30%">
          <el-input v-model="addForm.companyNature" placeholder="请输入公司性质"></el-input>
        </el-form-item>
        <el-form-item label="公司行业" prop="companyTrade" style="width:30%;">
          <el-input v-model="addForm.companyTrade" placeholder="请输入公司行业"></el-input>
        </el-form-item>
        <el-form-item label="主营产品" prop="companyProduct" style="width:30%">
          <el-input v-model="addForm.companyProduct" placeholder="请输入主营产品"></el-input>
        </el-form-item>
        <el-form-item label="公司区域" prop="companyArea" style="width:30%">
          <el-input v-model="addForm.companyArea" placeholder="请输入公司区域"></el-input>
        </el-form-item>
        <el-form-item label="公司详细地址" prop="companyAddres" style="width:30%">
          <el-input v-model="addForm.companyAddres" placeholder="请输入公司详细地址"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="companyContact" style="width:30%">
          <el-input v-model="addForm.companyContact" placeholder="请输入联系人"></el-input>
        </el-form-item>
        <el-form-item label="公司电话" prop="companyTel" style="width:30%">
          <el-input v-model="addForm.companyTel" placeholder="请输入公司电话"></el-input>
        </el-form-item>
        <el-form-item label="备注" style="width:100%">
          <el-input v-model="addForm.menuMemo" placeholder="请输入备注" rows="4"></el-input>
        </el-form-item>
      </el-form>
      <el-button size="large" type="primary" style="width:30%;display:block;margin:0 auto" @click="submitForm('addForm')">提交</el-button>
    </el-card>
  </div>
</template>

<script>
import { SUPPLIER_UPDATE } from "@/utils/api";
export default {
  data() {
    return {
      title: "修改供应商",
      addForm: {
        id: '',
        menuName: '',
        menuMemo: '',
        menuWeb: '',
        companyNature: '',
        companyTrade: '',
        companyProduct: '',
        companyArea: '',
        companyTel: '',
        companyAddres: '',
        companyContact: ''
      },
      rules: {
          menuName: [
            { required: true, message: '请输入供应商名称', trigger: 'blur' },
          ],
          menuWeb: [
            { required: true, message: '请输入供应商网站', trigger: 'blur' }
          ],
          companyNature: [
            { required: true, message: '请输入公司性质', trigger: 'blur' }
          ],
          companyTrade: [
            { required: true, message: '请输入公司行业', trigger: 'blur' }
          ],
          companyProduct: [
            { required: true, message: '请输入主营产品', trigger: 'blur' }
          ],
          companyArea: [
            { required: true, message: '请输入公司区域', trigger: 'blur' }
          ],
          companyTel: [
            { required: true, message: '请输入公司电话', trigger: 'blur' }
          ],
          companyAddres: [
            { required: true, message: '请输入公司详细地址', trigger: 'blur' }
          ],
          companyContact: [
            { required: true, message: '请输入联系人', trigger: 'blur' }
          ]
        }
    };
  },
  mounted() {
    // 参数获取
    const defaultSupplier = this.$route.query["data"]
    if (!defaultSupplier) {
      this.$message.success('系统异常')
      this.$router.push({ path: "Suppliers" })
    }
    // 默认赋值
    this.addForm.id = defaultSupplier.id
    this.addForm.menuName = defaultSupplier.menuName
    this.addForm.menuMemo = defaultSupplier.menuMemo
    this.addForm.menuWeb = defaultSupplier.menuWeb
    this.addForm.companyNature = defaultSupplier.companyNature
    this.addForm.companyTrade = defaultSupplier.companyTrade
    this.addForm.companyProduct = defaultSupplier.companyProduct
    this.addForm.companyArea = defaultSupplier.companyArea
    this.addForm.companyTel = defaultSupplier.companyTel
    this.addForm.companyAddres = defaultSupplier.companyAddres
    this.addForm.companyContact = defaultSupplier.companyContact
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addSupplier()
        } else {
          alert('error submit!');
          return false;
        }
      });
    },
    addSupplier(){
      SUPPLIER_UPDATE({
        id: this.addForm.id,
        menuName:this.addForm.menuName,
        menuMemo: this.addForm.menuMemo,
        menuWeb:this.addForm.menuWeb,
        companyNature:this.addForm.companyNature,
        companyTrade:this.addForm.companyTrade,
        companyProduct:this.addForm.companyProduct,
        companyArea:this.addForm.companyArea,
        companyTel:this.addForm.companyTel,
        companyAddres:this.addForm.companyAddres,
        companyContact:this.addForm.companyContact
      }).then(res => {
        this.$message.success(JSON.stringify(res))  
        if(res.status==200){
          this.$message.success('success')  
          this.$router.push({ path: "Suppliers" })
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.infos {
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
  .item {
    width: 30%;
  }
}
</style>